<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<style>
    body {
      font-family: Arial, Helvetica, sans-serif, sans-serif;
      text-align: center;
      background-color: #f2f2f2;
      padding: 20px;
    }
    #image {
      display: none;
      max-width: 100%;
      height: auto;
      margin-top: 15px;
    }
    #image_preview {
      display: none;
      margin-top: 15px;
    }
    button {
      width: 200px;
      font-size: 20px;
    }
</style>
<body>
<div>
    <button id="jumpTestApp" onclick="jumpTestApp()">跳转指定应用</button>
    <p id ="jumpAppResult">未支付</p>
</div>
<input ref="camera" type="file" id="upload" name="upload" accept="image/*" capture="upload" onchange="showPic()"/>
<p id="image_preview">图片预览</p>
<img id="image">
<script type="text/javascript">
    async function jumpTestApp() {
        const result = await webJumpTest.jumpTestApp();
        document.getElementById('jumpAppResult').innerText = result;
    }
    // 显示ArkTS返回的图片
    function showPic() {
      // input标签的onchange事件触发时，返回的的描述事件所有相关信息的对象，此处接收ArkTS中onShowFileSelector接口的返回结果
      let event = this.event;
      let tFile = event ? event.target.files : [];
      // 如果返回的图片列表是空的，则不显示
      if (tFile === 0) {
        document.getElementById('image_preview').style.display = 'block';
        document.getElementById('image_preview').innerHTML = "未选择图片";
        return;
      }
      document.getElementById('image').setAttribute('src', URL.createObjectURL(tFile[0]));
      document.getElementById('image_preview').style.display = 'block';
      document.getElementById('image').style.display = 'block';
    }
</script>
</body>
</html>